<template>
  <div class="basic-box">
    <el-form
      :model="shopForm"
      :rules="shopRules"
      ref="shopForm"
      size="small"
      label-position="right"
      label-width="130px"
    >
      <div class="haruyuki-form-title">{{ basicTitleData.agreementTitle }}</div>
      <div class="agreement-content">
        已通过短信形式，将签约信息发送至联系人手机，请注意查收。
      </div>
      <div class="haruyuki-form-title">{{ basicTitleData.aisleTitle }}</div>
      <!-- <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="选择通道:" prop="aisleCode">
            <el-select v-model="shopForm.aisleCode" placeholder="请选择通道" @change="handleChange">
              <el-option
                v-for="item in aisleList"
                :key="item.aisleCode"
                :label="item.aisleName"
                :value="item.aisleCode">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row> -->
      <div class="haruyuki-form-title">{{ basicTitleData.typeTitle }}</div>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="商户门头照片:" prop="merchantDoor">
            <el-upload
              action="/api/blade-resource/oss/endpoint/put-file-attach"
              list-type="picture-card"
              :http-request="httpmerchantDoorRequest"
              :limit="1"
              :file-list="merchantDoorList"
              :on-remove="merchantDoorRemove"
              :before-remove="beforemerchantDoorRemove"
              :before-upload="beforeUpload"
              :on-preview="imgPreview"
            >
              <i slot="default" class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="内景照片:" prop="interior">
            <el-upload
              action="/api/blade-resource/oss/endpoint/put-file-attach"
              list-type="picture-card"
              :http-request="httpinteriorRequest"
              :limit="1"
              :file-list="interiorList"
              :on-remove="interiorRemove"
              :before-remove="beforeinteriorRemove"
              :before-upload="beforeUpload"
              :on-preview="imgPreview"
            >
              <i slot="default" class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="收银台照片:" prop="checkoutCounter">
            <el-upload
              action="/api/blade-resource/oss/endpoint/put-file-attach"
              list-type="picture-card"
              :http-request="httpCheckoutCounterRequest"
              :limit="1"
              :file-list="checkoutCounterList"
              :on-remove="checkoutCounterRemove"
              :before-remove="beforecheckoutCounterRemove"
              :before-upload="beforeUpload"
              :on-preview="imgPreview"
            >
              <i slot="default" class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
      <div class="haruyuki-form-title">{{ basicTitleData.restsTitle }}</div>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="收单协议首页:" prop="acquiring">
            <el-upload
              action="/api/blade-resource/oss/endpoint/put-file-attach"
              list-type="picture-card"
              :http-request="httpacquiringRequest"
              :limit="1"
              :file-list="acquiringList"
              :on-remove="acquiringRemove"
              :before-remove="beforeacquiringRemove"
              :before-upload="beforeUpload"
              :on-preview="imgPreview"
            >
              <i slot="default" class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="收单协议盖章页:" prop="stamp">
            <el-upload
              action="/api/blade-resource/oss/endpoint/put-file-attach"
              list-type="picture-card"
              :http-request="httpstampRequest"
              :limit="1"
              :file-list="stampList"
              :on-remove="stampRemove"
              :before-remove="beforestampRemove"
              :before-upload="beforeUpload"
              :on-preview="imgPreview"
            >
              <i slot="default" class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="经营业务:" prop="business">
            <el-upload
              action="/api/blade-resource/oss/endpoint/put-file-attach"
              list-type="picture-card"
              :http-request="httpbusinessRequest"
              :limit="1"
              :file-list="businessList"
              :on-remove="businessRemove"
              :before-remove="beforebusinessRemove"
              :before-upload="beforeUpload"
              :on-preview="imgPreview"
            >
              <i slot="default" class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="租赁合同第一页:" prop="leaseholdFirst">
            <el-upload
              action="/api/blade-resource/oss/endpoint/put-file-attach"
              list-type="picture-card"
              :http-request="httpleaseholdFirstRequest"
              :limit="1"
              :file-list="leaseholdFirstList"
              :on-remove="leaseholdFirstRemove"
              :before-remove="beforeleaseholdFirstRemove"
              :before-upload="beforeUpload"
              :on-preview="imgPreview"
            >
              <i slot="default" class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="租赁合同第二页:" prop="leaseholdSecond">
            <el-upload
              action="/api/blade-resource/oss/endpoint/put-file-attach"
              list-type="picture-card"
              :http-request="httpleaseholdSecondRequest"
              :limit="1"
              :file-list="leaseholdSecondList"
              :on-remove="leaseholdSecondRemove"
              :before-remove="beforeleaseholdSecondRemove"
              :before-upload="beforeUpload"
              :on-preview="imgPreview"
            >
              <i slot="default" class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="租赁合同第三页:" prop="leaseholdThird">
            <el-upload
              action="/api/blade-resource/oss/endpoint/put-file-attach"
              list-type="picture-card"
              :http-request="httpleaseholdThirdRequest"
              :limit="1"
              :file-list="leaseholdThirdList"
              :on-remove="leaseholdThirdRemove"
              :before-remove="beforeleaseholdThirdRemove"
              :before-upload="beforeUpload"
              :on-preview="imgPreview"
            >
              <i slot="default" class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="租赁面积:" prop="areaPic">
            <el-upload
              action="/api/blade-resource/oss/endpoint/put-file-attach"
              list-type="picture-card"
              :http-request="httpareaPicRequest"
              :limit="1"
              :file-list="areaPicList"
              :on-remove="areaPicRemove"
              :before-remove="beforeareaPicRemove"
              :before-upload="beforeUpload"
              :on-preview="imgPreview"
            >
              <i slot="default" class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="授权书:" prop="authCer">
            <el-upload
              action="/api/blade-resource/oss/endpoint/put-file-attach"
              list-type="picture-card"
              :http-request="httpauthCerRequest"
              :limit="1"
              :file-list="authCerList"
              :on-remove="authCerRemove"
              :before-remove="beforeauthCerRemove"
              :before-upload="beforeUpload"
              :on-preview="imgPreview"
            >
              <i slot="default" class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="定位照:" prop="positioningPhoto">
            <el-upload
              action="/api/blade-resource/oss/endpoint/put-file-attach"
              list-type="picture-card"
              :http-request="httppositioningPhotoRequest"
              :limit="1"
              :file-list="positioningPhotoList"
              :on-remove="positioningPhotoRemove"
              :before-remove="beforepositioningPhotoRemove"
              :before-upload="beforeUpload"
              :on-preview="imgPreview"
            >
              <i slot="default" class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="客户经理与客户合影照片:" prop="clientPhoto">
            <el-upload
              action="/api/blade-resource/oss/endpoint/put-file-attach"
              list-type="picture-card"
              :http-request="httpclientPhotoRequest"
              :limit="1"
              :file-list="clientPhotoList"
              :on-remove="clientPhotoRemove"
              :before-remove="beforeclientPhotoRemove"
              :before-upload="beforeUpload"
              :on-preview="imgPreview"
            >
              <i slot="default" class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-image-viewer
        style="z-index: 99999;"
        v-if="imgShow"
        :on-close="()=>{ imgShow = false }"
        :url-list="imgUrlList"
      ></el-image-viewer>
  </div>
</template>

<script>
import { uploadPrivate } from "@/api/system/oss";
import canvasImg from '@/util/canvasImg';

export default {
  mixins: [canvasImg],
  props: {
    aisleList: {
      type: [Array],
      default: () => [],
    },
    shopForm: Object,
  },
  data() {
    return {
      imgShow:false,
      imgUrlList:[],
      basicTitleData: {
        agreementTitle: '协议信息',
        aisleTitle: '通道信息',
        typeTitle: "门店信息",
        restsTitle: "其他材料",
      },
      shopRules: {
        merchantDoor: [
          { required: true, message: "请上传商户门头照片", trigger: "blur" },
        ],
        interior: [
          { required: true, message: "请上传内景照片", trigger: "blur" },
        ],
        checkoutCounter: [
          { required: true, message: "请上传收银台照片", trigger: "blur" },
        ]
      },
      merchantDoorList: [],
      interiorList: [],
      checkoutCounterList: [],
      acquiringList: [],
      stampList: [],
      businessList: [],
      leaseholdFirstList: [],
      leaseholdSecondList: [],
      leaseholdThirdList: [],
      areaPicList: [],
      authCerList: [],
      positioningPhotoList: [],
      clientPhotoList: [],
    };
  },
  created() {
  },
  watch: {
    aisleList(list) {
      for (const item of list) {
        if (item.isDefault == 1) {
          this.shopForm.aisleCode = item.aisleCode;
          break;
        }
      }
    }
  },
  methods: {
    /* 预览图片 */
    imgPreview(file) {
      this.imgUrlList[0] = file.url;
      this.imgShow = true;
    },
    // beforeUpload(file) {
    //   this.compressPictures(file);
    // },
    /* 处理值改变事件 */
    handleChange(value) {
      this.shopForm.aisleCode = value;
    },
    /* 商户门头上传 */
    httpmerchantDoorRequest(option) {
      uploadPrivate(option.file, option.file.name).then((res) => {
        this.shopForm.merchantDoor = res.data.data.name;
        this.$refs.shopForm.validateField("merchantDoor");
      });
    },
    /* 商户门头删除 */
    merchantDoorRemove(file, fileList) {
      this.merchantDoorList = fileList;
      this.shopForm.merchantDoor = "";
    },
    beforemerchantDoorRemove() {
      return this.$confirm(`确定移除商户门头照片？`);
    },
    /* 内景照片上传 */
    httpinteriorRequest(option) {
      uploadPrivate(option.file, option.file.name).then((res) => {
        this.shopForm.interior = res.data.data.name;
        this.$refs.shopForm.validateField("interior");
      });
    },
    /* 内景照片删除 */
    interiorRemove(file, fileList) {
      this.interiorList = fileList;
      this.shopForm.interior = "";
    },
    beforeinteriorRemove() {
      return this.$confirm(`确定移除内景照片？`);
    },
    /* 收银台照片上传 */
    httpCheckoutCounterRequest(option) {
      uploadPrivate(option.file, option.file.name).then((res) => {
        this.shopForm.checkoutCounter = res.data.data.name;
        this.$refs.shopForm.validateField("checkoutCounter");
      });
    },
    /* 收银台照片删除 */
    checkoutCounterRemove(file, fileList) {
      this.checkoutCounterList = fileList;
      this.shopForm.checkoutCounter = "";
    },
    beforecheckoutCounterRemove() {
      return this.$confirm(`确定移除收银台照片？`);
    },
    /* 收单协议首页上传 */
    httpacquiringRequest(option) {
      uploadPrivate(option.file, option.file.name).then((res) => {
        this.shopForm.acquiring = res.data.data.name;
        this.$refs.shopForm.validateField("acquiring");
      });
    },
    /* 收单协议首页删除 */
    acquiringRemove(file, fileList) {
      this.acquiringList = fileList;
      this.shopForm.acquiring = "";
    },
    beforeacquiringRemove() {
      return this.$confirm(`确定移除收单协议首页照片？`);
    },
    /* 收单协议盖章页上传 */
    httpstampRequest(option) {
      uploadPrivate(option.file, option.file.name).then((res) => {
        this.shopForm.stamp = res.data.data.name;
        this.$refs.shopForm.validateField("stamp");
      });
    },
    /* 收单协议盖章页删除 */
    stampRemove(file, fileList) {
      this.stampList = fileList;
      this.shopForm.stamp = "";
    },
    beforestampRemove() {
      return this.$confirm(`确定移除收单协议盖章页照片？`);
    },
    /* 经营业务上传 */
    httpbusinessRequest(option) {
      uploadPrivate(option.file, option.file.name).then((res) => {
        this.shopForm.business = res.data.data.name;
        this.$refs.shopForm.validateField("business");
      });
    },
    /* 经营业务删除 */
    businessRemove(file, fileList) {
      this.businessList = fileList;
      this.shopForm.business = "";
    },
    beforebusinessRemove() {
      return this.$confirm(`确定移除经营业务照片？`);
    },
    /* 租赁合同第一页上传 */
    httpleaseholdFirstRequest(option) {
      uploadPrivate(option.file, option.file.name).then((res) => {
        this.shopForm.leaseholdFirst = res.data.data.name;
        this.$refs.shopForm.validateField("leaseholdFirst");
      });
    },
    /* 租赁合同第一页删除 */
    leaseholdFirstRemove(file, fileList) {
      this.leaseholdFirstList = fileList;
      this.shopForm.leaseholdFirst = "";
    },
    beforeleaseholdFirstRemove() {
      return this.$confirm(`确定租赁合同第一页照片？`);
    },
    /* 租赁合同第二页上传 */
    httpleaseholdSecondRequest(option) {
      uploadPrivate(option.file, option.file.name).then((res) => {
        this.shopForm.leaseholdSecond = res.data.data.name;
        this.$refs.shopForm.validateField("leaseholdSecond");
      });
    },
    /* 租赁合同第二页删除 */
    leaseholdSecondRemove(file, fileList) {
      this.leaseholdSecondList = fileList;
      this.shopForm.leaseholdSecond = "";
    },
    beforeleaseholdSecondRemove() {
      return this.$confirm(`确定租赁合同第二页照片？`);
    },
    /* 租赁合同第三页上传 */
    httpleaseholdThirdRequest(option) {
      uploadPrivate(option.file, option.file.name).then((res) => {
        this.shopForm.leaseholdThird = res.data.data.name;
        this.$refs.shopForm.validateField("leaseholdThird");
      });
    },
    /* 租赁合同第三页删除 */
    leaseholdThirdRemove(file, fileList) {
      this.leaseholdThirdList = fileList;
      this.shopForm.leaseholdThird = "";
    },
    beforeleaseholdThirdRemove() {
      return this.$confirm(`确定租赁合同第三页照片？`);
    },
    /* 租赁面积上传 */
    httpareaPicRequest(option) {
      uploadPrivate(option.file, option.file.name).then((res) => {
        this.shopForm.areaPic = res.data.data.name;
        this.$refs.shopForm.validateField("areaPic");
      });
    },
    /* 租赁面积删除 */
    areaPicRemove(file, fileList) {
      this.areaPicList = fileList;
      this.shopForm.areaPic = "";
    },
    beforeareaPicRemove() {
      return this.$confirm(`确定移除租赁面积照片？`);
    },
    /* 授权书上传 */
    httpauthCerRequest(option) {
      uploadPrivate(option.file, option.file.name).then((res) => {
        this.shopForm.authCer = res.data.data.name;
        this.$refs.shopForm.validateField("authCer");
      });
    },
    /* 授权书删除 */
    authCerRemove(file, fileList) {
      this.authCerList = fileList;
      this.shopForm.authCer = "";
    },
    /* 商户进件增加定位照上传 */
    httppositioningPhotoRequest(option) {
      uploadPrivate(option.file, option.file.name).then((res) => {
        this.shopForm.positioningPhoto = res.data.data.name;
        this.$refs.shopForm.validateField("positioningPhoto");
      });
    },
    /* 商户进件增加定位照删除 */
    positioningPhotoRemove(file, fileList) {
      this.positioningPhotoList = fileList;
      this.shopForm.positioningPhoto = "";
    },
    beforepositioningPhotoRemove() {
      return this.$confirm(`确定移除定位照？`);
    },
    /* 客户经理与客户（被授权人）合影照片上传 */
    httpclientPhotoRequest(option) {
      uploadPrivate(option.file, option.file.name).then((res) => {
        this.shopForm.clientPhoto = res.data.data.name;
        this.$refs.shopForm.validateField("clientPhoto");
      });
    },
    /* 客户经理与客户（被授权人）合影照片删除 */
    clientPhotoRemove(file, fileList) {
      this.clientPhotoList = fileList;
      this.shopForm.clientPhoto = "";
    },
    beforeclientPhotoRemove() {
      return this.$confirm(`确定移除客户经理与客户合影照片照片？`);
    },
  },
};
</script>

<style lang="scss" scoped>
.basic-box {
  padding: 20px 40px 20px 0;
  .basic-box-title {
    font-size: 18px;
    text-align: center;
    margin-bottom: 20px;
  }
}
.basic-margin-top {
  margin-top: 40px;
}

.agreement-content {
  text-align: center;
  color: #355c7d;
  margin-bottom: 80px;
}
</style>